@import "_setting";
@import "_reset";

@import "_header";
@import "_footer";

@import "_banner";


/* ============= content ===============*/
.container{
	margin: 20px auto;
}
#banner{
	.slider{
		overflow: hidden;
		ul{
			width: 9999px;
		}
		li{
			float: left;
			width: 1200px;
			height: 336px;
			a{
				display: inline-block;
				width: 100%;
				height: 100%;
			}
			img{
				display: block;
				width: 100%;
				height: 100%;
				background-color: #ccc;
			}
		}
	}
}
.section{
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #ccc;
	h2{
		font-size: 22px;
		font-weight: normal;
		color: $aBlueColor;
		text-align: center;
		margin: 10px 0 20px;
		span{
			padding-left: 10px;
		}
	}
	.msg{
		font-size: 12px;
		position: relative;
		height: 500px;
		background: #f5f5f7 url(../img/cup.png) no-repeat right bottom;
		@at-root .tag{
			display: block;
			position: absolute;
			z-index: 99;
			background: url(../img/tv-bg-l.png) no-repeat center;
			width: 153px;
			height: 110px;
			line-height: 100px;
			font-family: Arial;
			text-align: center;
			color: #93e8ff;
			font-size: 22px;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
			transform-origin: left bottom;
			b{
				display: inline-block;
				transform: rotateZ(-7deg);
			}
		}
		.tag{
			left: -60px;
			top: -30px;
		}
		.art-cont{
			margin: 10px 0;
			p{
				text-indent: 2em;
				line-height: 1.5;
			}
		}
		article.left-art{
			margin-left: 90px;
		}
		article.right-art{
			margin-right: 120px;
		}
	}
}
#panel{
	width: 100%;
	.hot-massage{
		float: left;
		width: 50%;
		height: 600px;
		position: relative;
		&::before, &::after {
			display: block;
			position: absolute;
			z-index: -1;
			bottom: 66px;
			width: 500px;
			height: 0;
			overflow: hidden;
			border-radius: 3px;
			clear: both;
			content: ".";
			box-shadow: 0 0 15px 20px rgba(0, 0, 0, .3);
		}
		&::before {
			-webkit-transform: rotate(-5deg);
			transform: rotate(-5deg);
			left: 28px;
		}
		&::after {
			-webkit-transform: rotate(5deg);
			transform: rotate(5deg);
			right: 28px;
		}
		article{
			padding: 10px 20px;
			min-height: 188px;
			h3{
				font-size: 16px;
				height: 50px;
				font-weight: normal;
				line-height: 38px;
				padding-left: 80px;
				background: url(../img/tip.png) no-repeat left center;
				position: relative;
				a{
					color: $aBlueColor;
					font-size: 14px;
				}
				b{
					position: absolute;
					right: 100px;
					bottom: 15px;
					font-size: 12px;
					color: #999;
					line-height: 1;
				}
			}
			.sh{
				display: table;
				width: 100%;
				border-bottom: 1px dotted #ccc;
			}
			span{
				display: table-cell;
				line-height: 16px;
				a{
					color: #b7b9b8;
				}
				i{
					margin-right: 5px;
				}
				&.sh-store{
					color: #eda941;
				}
				&.sh-wb{
					color: #f10000;
				}
				&.sh-com{
					color: #62b8de;
				}
			}
		}
	}
	.new-article{
		float: right;
		width: 50%;
		background: url(../img/art-line.png) no-repeat 30px center;
		background-size: 100%;
		.usr-box{
			position: relative;
			width: 370px;
			span{
				position: absolute;
			}
			.usr-1{
				left: 66px;
    			top: 56px;
			}
			.usr-2{
				right: 17px;
    			top: 56px;
			}
			.usr-3{
				left: 66px;
    			top: 260px;
			}
			.usr-4{
				right: 17px;
    			top: 260px;
			}
		}
		.side-talk{
			float: right;
			height: 500px;
			width: 224px;
			background-color: #eff0f1;
			position: relative;
			&::before, &::after {
				display: block;
				position: absolute;
				z-index: -1;
				bottom: 16px;
				width: 100px;
				height: 0;
				overflow: hidden;
				border-radius: 3px;
				clear: both;
				content: "";
				box-shadow: 0 0 15px 20px rgba(0, 0, 0, .3);
			}
			&::before {
				-webkit-transform: rotate(-5deg);
				transform: rotate(-5deg);
				left: 26px;
			}
			&::after {
				-webkit-transform: rotate(5deg);
				transform: rotate(5deg);
				right: 26px;
			}
			.art-tab{
				display: table;
				width: 100%;
				span{
					font-size: 14px;
					display: table-cell;
					text-align: center;
					vertical-align: middle;
					height: 32px;
					width: 50%;
					background-color: transparent;
					border-bottom: 1px solid #18b6ff;
					a{
						display: block;
						color: #565656;
						font-weight: normal;
						text-decoration: none;
					}
				}
				span.active{
					background-color: #18b6ff;
					a{
						color: #fff;
					}
				}
			}
			.art-cont{
				width: 100%;
				line-height: 1.5;
				@at-root .art-box{
					font-size: 12px;
					display: none;
					&.cont-active{
						display: block;
					}
					dl{
						margin-top: 20px;
						padding: 0 10px;
						overflow: hidden;
					}
					dt{
						float: left;
						img{
							display: block;
							width: 50px;
							height: 50px;
							overflow: hidden;
						}
					}
					dd{
						float: left;
						margin-left: 10px;
						width: 143px;
					}
					.art-usr{
						small{
							margin-left: 2px;
						}
					}
					.art-tit{
						display: block;
						font-size: 12px;
						strong{
							font-weight: normal;
						}
					}
					.art-com{
						font-weight: normal;
					}
				}
			}
		}
	}
}

#boutique{
	margin: 20px 0;
	@at-root .boutique-rec{
		width: 100%;
		position: relative;
		.tag{
			left: -60px;
			top: 12px;
		}
		ul{
			margin-left: -10px;
			width: 1210px;
		}
		li{
			float: left;
			width: 290px;
			height: 288px;
			margin: 0 0 10px 10px;
			text-align: center;
			line-height: 288px;
			position: relative;
			.rec-pan{
				position: absolute;
				bottom: 0;
				left: 0;
				height: 30px;
				line-height: 30px;
				color: #333;
				text-align: left;
				width: 100%;
				.rec-tit{
					float: left;
					padding: 0 0 0 20px;
				}
				.rec-like{
					float: right;
					padding: 0 20px 0 0;
				}
				span{
					display: inline-block;
					a{
						display: inline-block;
						border: none;
					}
					i{
						margin-right: 2px;
						&.fa-heart-o{
							color: #fd5a46;
						}
						&.fa-circle-o{
							color: #97ceec;
						}
					}
					margin-left: 10px;
				}
			}
			a{
				border: 1px solid #eee;
				display: block;
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			img{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 100%;
				height: auto;
				max-height: 100%;
			}
		}
		li.rec-big{
			vertical-align: 586px;
			width: 590px;
			height: 586px;
		}
	}
}
#appraisal{
	width: 100%;
	.appraisal{
		position: relative;
		.tag{
			right: -38px;
    		top: 25px;
    		background: url(../img/tv-bg-r.png) no-repeat center;
			b{
				transform: rotateZ(5deg);
			}
		}
		.apr-l{
			float: left;
			margin-right: 10px;
			width: 690px;
			height: 700px;
			.apr-ad{
				height: 345px;
				width: 100%;
				margin-bottom: 10px;
				@include testBG;
			}
			a{
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
				img{
					max-width: 100%;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					margin: auto;
				}
			}
			.apr-list{
				height: 345px;
				width: 100%;
				ul{
					width: 1200px;
				}
				li{
					width: 230px;
					height: 345px;
					float: left;
				}
			}
		}
		.apr-r{
			@include testBG;
			float: right;
			width: 500px;
			height: 700px;
		}
	}
}